import React from 'react'

import {
  List,
} from 'antd-mobile'
import { Map } from 'react-amap';

import styles from '../../styles.less'
import PublicTemplate from '../../../../services/PublicTemplate';

const imgData = [{
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
}, {
  src: require('../../../../assets/image/bg.png')
},]

const projectDetailsData = [{
  title: '行政区划：',
  value: '越城区',
}, {
  title: '项目规模：',
  value: '5万吨/年',
}, {
  title: '建设单位：',
  value: '绍兴光之源环保有限公司',
}, {
  title: '项目进度：',
  value: '已完成'
}, {
  title: '投资金额：',
  value: '21000万元',
}, {
  title: '完成年限：',
  value: '2019.12',
}, {
  title: '项目地址：',
  value: '绍兴袍江新区海塘路26号',
}, {
  title: '支撑材料：',
  value: '项目可行性研究报告',
  download: true,
  extra: (
    <img src={require('../../../../assets/image/download.png')} className={styles.img_download} alt='' />
  )
}]

function buildImgContainer() {
  const more = imgData.length > 6
  const size = more ? imgData.length - 6 : 0

  const data = more ? imgData.slice(0, 6) : imgData

  return (
    <div className={styles.img_container}>
      {
        data.map((item, index) => (
          <div
            key={item.src}
            className={styles.img_item}
            style={{
              backgroundImage: `url(${item.src})`,
            }}>
            {
              index === 5 ? (
                <div className={styles.gridItem}>
                  +{size}
                </div>
              ) : null
            }
          </div>
        ))
      }
    </div>
  )
}

export default class ProjectDetails extends React.Component {
  render() {
    const title = '废矿物油综合利用项目'

    return (
      <div>
        <div className={styles.projectDetail_title}>
          {title}
        </div>
        <List>
          {
            projectDetailsData.map(item => (
              <List.Item
                // multipleLine
                // wrap
                key={item.title}
                extra={item.extra ? item.extra : null}>
                <div className={styles.list_title}>
                  {item.title}
                  <span className={styles.list_value}
                    style={{
                      color: item.download ? 'rgba(32, 157, 235, 1)' : 'rgba(51, 51, 51, 1)'
                    }}
                  >{PublicTemplate.stringToEllipsis(item.value, 9)}</span>
                </div>
              </List.Item>
            ))
          }
        </List>

        <div className={styles.img_grid}>
          {
            buildImgContainer()
          }
        </div>
        <div className={styles.position_container}>
          <div className={styles.position_title}>
            <span>项目定位</span>
          </div>
          <div className={styles.map_container}>
            <Map amapkey='b3e8d4d69dfcb991b90a9d2cc3c7ab18' />
          </div>
        </div>
      </div>
    );
  }
}